<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
  body{background:url("images/bodyBg.jpg");}
  .container{width:980px;height:100%;margin:50px auto;}
  .hex{width:180px;height:105px;background:rgba(0,0,0,.7);position:relative;
  float:left;cursor:pointer;margin:30px 5px;}
  .hex:nth-child(9n-3){margin-left:100px;}
  .hex:before,.hex:after{position:absolute;top:0;left:0;background:rgba(0,0,0,.7);width:180px;height:105px;content:"";}
  .hex:before{transform:rotate(60deg);}
  .hex:after{transform:rotate(-60deg);}
  .hex img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:9999;transition:all .5s linear;}
  .hex:hover img{transform:scale(1.3) rotate(360deg);}
  </style>
 </head>
 <body>
	<div class="container">
		<div class="hex">
			<a href="#"><img src="images/1.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/2.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/3.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/4.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/5.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/6.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/7.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/8.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/9.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/10.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/11.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/12.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/13.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/14.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/15.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/16.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/17.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/18.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/19.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/20.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/21.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/22.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/23.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/24.png"></a>
		</div>
		<div class="hex">
			<a href="#"><img src="images/25.png"></a>
		</div>
	</div>
 </body>
</html>
